<template>
	<view :style="{ 'background-color': panelBg }" class="uni-empty">
		<template v-if="size === 'small'">
			<view class="empty-content-small">
				<image class="image" :src="src" mode="aspectFit"></image>
				<view v-if="desc" class="desc">{{ desc }}</view>
				<button
					v-if="showBtn"
					@click="goShoping()"
					:style="themeStyles.btnAuxiliaryColor"
					class="df df-r btn"
				>
					去逛逛吧
				</button>
			</view>
		</template>
		<template v-else>
			<view class="empty-content">
				<image class="image" :src="src" mode="aspectFit"></image>
				<view v-if="desc" class="desc">{{ desc }}</view>
				<button
					v-if="showBtn"
					@click="goShoping()"
					:style="themeStyles.btnAuxiliaryColor"
					class="df df-r btn"
				>
					去逛逛吧
				</button>
			</view>
		</template>
	</view>
</template>

<script>
export default {
	props: {
		panelBg: {
			type: String,
			default: ""
		},

		src: {
			type: String,
			default: "empty"
		},
		size: {
			type: String,
			default: "large"
		},
		desc: {
			type: String,
			default: "空空如也 ~"
		},
		showBtn: {
			type: Boolean,
			default: false
		},
		btnLink: {
			type: Object,
			default() {
				return {
					pageType: "1101", // 1101: tabbar页面, 1102: 非tabbar页面
					url: "/pages/tabbar/category"
				};
			}
		},

		btnColor: {
			type: String,
			default: ""
		}
	},

	data() {
		return {
			typeSrc: {
				empty: ""
			}
		};
	},

	methods: {
		goShoping() {
			switch (this.btnLink.pageType) {
				case "1101":
					uni.switchTab({
						url: this.btnLink.url
					});
					break;
				case "1102":
					uni.navigateTo({
						url: this.btnLink.url
					});
					break;

				default:
					break;
			}
		}
	},

	computed: {
		setSrc() {
			return this.typeSrc[this.src];
		}
	}
};
</script>

<style lang="scss">
.uni-empty {
	background-color: $theme-main-bg-color;
	.desc {
		margin-top: 32rpx;
		font-size: $theme-size-large-base;
		color: $theme-color-base;
	}
	.btn {
		margin-top: 104rpx;
		width: 332rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid;
		font-size: $theme-size-large-base;
	}
}

.empty-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 120rpx;
	.image {
		width: 272rpx;
		height: 208rpx;
	}
}

.empty-content-small {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 440rpx;
	width: 100%;
	.image {
		width: 294rpx;
		height: 150rpx;
	}
}
</style>
